<template>
  <nav v-scroll="navScroll">
    <v-app-bar app flat color="rgba(0, 0, 0, 0.2)" height="65">
      <v-row no-gutters>
        <v-col cols="12" md="3" xl="3" lg="3">
          <v-app-bar-nav-icon
            @click="drawer = true"
            dark
            class="hidden-md-and-up float-left"
          ></v-app-bar-nav-icon>
          <v-hover v-slot="{ hover }">
            <router-link
              to="/"
              tag="h1"
              :class="{ 'text-hover': hover }"
              class="white--text display-1 hidden-sm-and-down ml-2"
              style="cursor: pointer;"
            >
              <v-img src="/icon.png" max-width="65px" max-height="65px" />
            </router-link>
          </v-hover>
        </v-col>
        <v-col md="6" xl="6" lg="6" class="hidden-sm-and-down display-1">
          <v-item-group>
            <v-item>
              <v-hover v-slot="{ hover }">
                <v-btn
                  text
                  :class="{ 'text-hover': hover }"
                  class="white--text"
                  to="/"
                >
                  <v-icon small>mdi-home</v-icon>
                  <span class="ml-1">主页</span>
                </v-btn>
              </v-hover>
            </v-item>
            <v-item>
              <v-hover v-slot="{ hover }">
                <v-btn
                  text
                  :class="{ 'text-hover': hover }"
                  class="white--text"
                  to="/archive"
                >
                  <v-icon small>mdi-archive</v-icon>
                  <span class="ml-1">归档</span>
                </v-btn>
              </v-hover>
            </v-item>
            <!--            <v-item>-->
            <!--              <v-hover v-slot="{ hover }">-->
            <!--                <v-menu transition="fab-transition" bottom offset-y>-->
            <!--                  <template v-slot:activator="{ on, attrs }">-->
            <!--                    <v-btn-->
            <!--                      text-->
            <!--                      :class="{ 'text-hover': hover }"-->
            <!--                      class="white&#45;&#45;text"-->
            <!--                      v-on="on"-->
            <!--                      v-bind="attrs"-->
            <!--                    >-->
            <!--                      <v-icon small>mdi-play-network</v-icon>-->
            <!--                      <span class="ml-1">媒体</span>-->
            <!--                    </v-btn>-->
            <!--                  </template>-->
            <!--                  <v-list>-->
            <!--                    <v-list-item to="/media/image">-->
            <!--                      <v-list-item-icon>-->
            <!--                        <v-icon class="orange&#45;&#45;text"-->
            <!--                          >mdi-folder-multiple-image</v-icon-->
            <!--                        >-->
            <!--                      </v-list-item-icon>-->
            <!--                      <v-list-item-content>-->
            <!--                        <v-list-item-title class="orange&#45;&#45;text"-->
            <!--                          >图片</v-list-item-title-->
            <!--                        >-->
            <!--                      </v-list-item-content>-->
            <!--                    </v-list-item>-->
            <!--                    <v-list-item to="/media/music">-->
            <!--                      <v-list-item-icon>-->
            <!--                        <v-icon class="orange&#45;&#45;text">mdi-music-box-multiple</v-icon>-->
            <!--                      </v-list-item-icon>-->
            <!--                      <v-list-item-content>-->
            <!--                        <v-list-item-title class="orange&#45;&#45;text">音乐</v-list-item-title>-->
            <!--                      </v-list-item-content>-->
            <!--                    </v-list-item>-->
            <!--                  </v-list>-->
            <!--                </v-menu>-->
            <!--              </v-hover>-->
            <!--            </v-item>-->
            <v-item>
              <v-hover v-slot="{ hover }">
                <v-btn
                  text
                  :class="{ 'text-hover': hover }"
                  class="white--text"
                  to="/leaveComment"
                >
                  <v-icon small>mdi-tooltip-edit</v-icon>
                  <span class="ml-1">留言板</span>
                </v-btn>
              </v-hover>
            </v-item>
            <v-item>
              <v-hover v-slot="{ hover }">
                <v-btn
                  text
                  :class="{ 'text-hover': hover }"
                  class="white--text"
                  to="/friendLink"
                >
                  <v-icon small>mdi-link-variant</v-icon>
                  <span class="ml-1">友人帐</span>
                </v-btn>
              </v-hover>
            </v-item>
            <v-item>
              <v-hover v-slot="{ hover }">
                <v-btn
                  text
                  :class="{ 'text-hover': hover }"
                  class="white--text"
                  to="/about"
                >
                  <v-icon small>mdi-chat-question</v-icon>
                  <span class="ml-1">关于</span>
                </v-btn>
              </v-hover>
            </v-item>
            <v-item>
              <v-hover v-slot="{ hover }">
                <v-dialog scrollable max-width="600px" v-model="searchShow">
                  <template v-slot:activator="{ on, attrs }">
                    <v-btn
                      icon
                      :class="{ 'text-hover': hover }"
                      class="white--text float-right"
                      style="height: 100%; width: 65px"
                      v-on="on"
                      v-bind="attrs"
                    >
                      <v-icon>mdi-magnify</v-icon>
                    </v-btn>
                  </template>
                  <v-container class="white pa-4">
                    <v-text-field
                      outlined
                      label="检索"
                      clearable
                      dense
                      v-model="searchText"
                      @input="search"
                    ></v-text-field>
                    <v-list dense>
                      <v-list-item
                        class="grey lighten-5 rounded"
                        v-for="article in searchData"
                        :key="article.id"
                        @click="searchItemClick(article.id)"
                      >
                        <v-list-item-content>
                          <v-list-item-title class="subtitle-1">{{
                            article.title
                          }}</v-list-item-title>
                          <v-list-item-subtitle class="caption">{{
                            article.articleDesc
                          }}</v-list-item-subtitle>
                        </v-list-item-content>
                      </v-list-item>
                    </v-list>
                  </v-container>
                </v-dialog>
              </v-hover>
            </v-item>
          </v-item-group>
        </v-col>
      </v-row>
    </v-app-bar>
    <v-navigation-drawer
      dark
      v-model="drawer"
      app
      height="999999"
      temporary
      width="300"
    >
      <v-list
        nav
        dense
        style="font-family: 'Roboto', sans-serif;"
        min-width="300px"
      >
        <v-item-group>
          <v-list-item>
            <v-list-item-content>
              <router-link
                to="/"
                tag="h1"
                class="white--text display-1 mt-3"
                style="cursor: pointer"
              >
                <!--                My Blog-->
                <v-img src="/icon.png" max-width="60px" />
              </router-link>
            </v-list-item-content>
          </v-list-item>
        </v-item-group>
        <v-list-item>
          <v-list-item-content class="pr-1">
            <v-text-field
              outlined
              dense
              label="搜索"
              append-outer-icon="mdi-magnify"
              @click:append-outer="searchShow = true"
              v-model="searchText"
            ></v-text-field>
          </v-list-item-content>
        </v-list-item>
        <v-item-group>
          <v-list-item to="/">
            <v-list-item-icon>
              <v-icon>mdi-home</v-icon>
            </v-list-item-icon>
            <v-list-item-content>
              <v-list-item-title>主页</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-item-group>
        <v-item-group>
          <v-list-item to="/archive">
            <v-list-item-icon>
              <v-icon>mdi-archive</v-icon>
            </v-list-item-icon>
            <v-list-item-content>
              <v-list-item-title>归档</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-item-group>
        <!--        <v-list-group prepend-icon="mdi-play-network" no-action>-->
        <!--          <template v-slot:activator>-->
        <!--            <v-list-item-content>-->
        <!--              <v-list-item-title>媒体</v-list-item-title>-->
        <!--            </v-list-item-content>-->
        <!--          </template>-->
        <!--          <v-list-item to="/media/image">-->
        <!--            <v-list-item-icon>-->
        <!--              <v-icon small>mdi-folder-multiple-image</v-icon>-->
        <!--            </v-list-item-icon>-->
        <!--            <v-list-item-content>-->
        <!--              <v-list-item-title>图片</v-list-item-title>-->
        <!--            </v-list-item-content>-->
        <!--          </v-list-item>-->
        <!--          <v-list-item to="/media/music">-->
        <!--            <v-list-item-icon>-->
        <!--              <v-icon small>mdi-music-box-multiple</v-icon>-->
        <!--            </v-list-item-icon>-->
        <!--            <v-list-item-content>-->
        <!--              <v-list-item-title>音乐</v-list-item-title>-->
        <!--            </v-list-item-content>-->
        <!--          </v-list-item>-->
        <!--        </v-list-group>-->
        <v-item-group>
          <v-list-item to="/leaveComment">
            <v-list-item-icon>
              <v-icon>mdi-tooltip-edit</v-icon>
            </v-list-item-icon>
            <v-list-item-content>
              <v-list-item-title>留言板</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-item-group>
        <v-item-group>
          <v-list-item to="/friendLink">
            <v-list-item-icon>
              <v-icon>mdi-link-variant</v-icon>
            </v-list-item-icon>
            <v-list-item-content>
              <v-list-item-title>友人帐</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-item-group>
        <v-item-group>
          <v-list-item to="/about">
            <v-list-item-icon>
              <v-icon>mdi-chat-question</v-icon>
            </v-list-item-icon>
            <v-list-item-content>
              <v-list-item-title>关于</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-item-group>
      </v-list>
    </v-navigation-drawer>
  </nav>
</template>

<script>
import { searchArticle } from "@/api/article";

export default {
  name: "Navbar",
  data() {
    return {
      drawer: false,
      searchText: "",
      searchData: [],
      searchShow: false
    };
  },
  methods: {
    search() {
      if (!this.searchText || this.searchText.trim() === "") {
        this.searchData = [];
        return;
      }
      searchArticle(this.searchText).then(res => {
        if (res.code === 200) {
          this.searchData = res.data.list;
        }
      });
    },
    navScroll() {
      const navbar = document.getElementsByClassName("v-app-bar")[0];
      if (document.documentElement && document.documentElement.scrollTop) {
        navbar.style.backgroundColor = "rgba(0, 0, 0, .5)";
        navbar.style.top = 0;
      } else {
        navbar.style.backgroundColor = "rgba(0, 0, 0, 0)";
      }
    },
    searchItemClick(id) {
      this.searchShow = false;
      this.$router.push(`/article/${id}`);
    }
  }
};
</script>
<style scoped>
.v-btn:not(.v-btn--round).v-size--default {
  padding: 0 12px !important;
}
.v-item-group {
  min-width: 650px;
  height: 100%;
  line-height: 55px;
}
.v-application .white--text.text-hover {
  color: #f48fb1 !important;
}
</style>
